<template>
  <div class="app-cont">
    <!--<div class="header">-->
    <!--<headers :title=FL.kindname></headers>-->
    <!--</div>-->
    <div class="main">
      <div class="main-container">
        <div id="memberList">
          <div class="fenlei-list">
            <div class="list">
              <ul>
                <li class="item" v-for="(good, index) in goods" :key="index" @click="toNext(index)">
                  <div class="top">
                    <div class="pic left"><img :src="good.mallImg" alt=""></div>
                    <div class="right">
                      <span class="goodsName">{{good.mallName}}</span>
                      <p class="goodsPrice">
                        <span class="gray">已进货： {{good.mallSecify[0].stock}}件</span>
                      </p>
                      <p class="red"><span class="red-left">&yen {{good.mallSecify[0].salePrice / 100}}</span><span
                        class="red-right">&yen{{good.mallSecify[0].salePrice * good.commissionRatio / 100 / 10000}}</span>
                      </p>
                      <p class="jdp"><span class="jdp-left">京东价: {{good.mallSecify[0].jdPrice / 100}}</span><span
                        class="jdp-right">预计佣金</span>
                      </p>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>

        </div>
      </div>
    </div>

    <!--  <div class="footer">
        <mt-tabbar class="tabbar">
          <mt-tab-item id="tab1">
            <img slot="icon" src="./../assets/images/ico_home_1@1x.png" @click="disTrueHome">
            首页
          </mt-tab-item>
          <mt-tab-item id="tab2" class="MemberlistNow">
            <img slot="icon" src="./../assets/images/ico_fenlei_2@1x.png" @click="toMemberContainer">
            分类
          </mt-tab-item>
          <mt-tab-item id="tab3">
            <img slot="icon" src="./../assets/images/ico_dianpu_1@1x.png" @click="toShops">
            店铺
          </mt-tab-item>
          <mt-tab-item id="tab4">
            <img slot="icon" src="./../assets/images/ico_wode_1@1x.png" @click="tomyHomeFX">
            我的
          </mt-tab-item>
        </mt-tabbar>

      </div>-->
    <loading v-show="showLoading"></loading>
    <alertTip v-if="showAlert" @closeTip="go()" :alertText="alertText"></alertTip>
  </div>


</template>

<script>
  /* eslint-disable no-trailing-spaces,indent */
  import wx from 'weixin-js-sdk'
  import { wxHttpTool,wx_config, http_getParam, get_shopQrcoe,wx_share,wx_hideAllMenu } from '../components/httpUtil/httpUtil'
  import {msg_10046} from '../message/msg_10046'
  //  import {Toast} from 'mint-ui';
  import {relogin} from "../components/httpUtil/httpUtil";

  export default {
    name: 'MemberList',
    data () {
      return {
        title: '',
        isShow: false,
        showLoading: true, //显示加载动画
        goods: [],
        FL: {},
        secify: {},
        showAlert: false,
        alertText: null
      }
    },
    created () { // 生命周期
      wxHttpTool.wxAuthor(this, function (varRet, varJson, varThis = this) {
        if (varRet == -1) {
          varThis.alertTip('网络错误');
          varThis.go = function () {
            varThis.showAlert = false;
          }

        }
        // 关注钱应该判断下是否已经关注过了
        msg_10046.send(varThis,msg_10046.entity(),function(varThis,res){
          varThis.wxlist=res.data.p.sign
          wx_config(varThis.wxlist);
          wx_hideAllMenu();
          wx.hideMenuItems({
            //禁用单独分享朋友圈QQ空间等功能
            menuList: ["menuItem:share:timeline","menuItem:share:QZone","menuItem:share:qq"] // 要隐藏的菜单项，所有menu项见附录3
          });
        })


      },1)
      this.FL = JSON.parse(localStorage.getItem('FL'))
      this.getlist()
    },
    methods: {
      alertTip(msg){
        this.showAlert = true;
        this.alertText = msg;
      },
      go(){
        this.showAlert = false
      },
      // 隐藏动画
      hideLoading(){
        this.showLoading = false;
      },
      addCar () {
        this.alertTip('加入购物车');
        this.go = function () {
          this.showAlert = false;
        }
        // alert('加入购物车')
      },
      pinDan () {
        this.alertTip('立即拼单');
        this.go = function () {
          this.showAlert = false;
        }
        // alert('立即拼单')
      },
      getlist () {
        const jsonValue = JSON.stringify({
          'c': '10006',
          'p': {
            'userId': JSON.parse(window.localStorage.data).id,
            'tokenId': token(),
            'startIndex': 0,
            'pageSize': 5,
            "firClass": this.FL.fid,//商品一级分类
            "secClass": this.FL.id,//商品二级分类
//            "mallTagging":1 //商品标注 0新品  1热销
          }
        })
        this.$http.post(api + '/qqs.us', jsonValue).then((res) => {
          console.log(res)
          if (res.data.p.isTrue) {
            this.hideLoading();
            this.goods = res.data.p.list
          } else {
            this.hideLoading();
            this.alertTip(res.data.p.errorMsg);
            if (res.data.p.errorMsg === 90) {
              this.go = ()=> {
                this.showAlert = false
                let _this = this;
                relogin(_this)
              }
            }
          }
        })
      },
      disTrueHome () {
        console.log(1)
        this.$router.push({name: 'disTrueHome'})
      },
      toMemberContainer () {
        console.log(1)
        this.$router.push({name: 'MemberContainer'})
      },
      toShops () {
        this.$router.push({name: 'Shops'})
      },
      tomyHomeFX () {
        this.$router.push({name: 'myHomeFX'})
      },
      toNext (index) {
        window.localStorage.mallId = this.goods[index].id
        alert(window.localStorage.mallId)
        console.log(this.goods[index].id)
        this.$router.push({
          name: 'FXGoodsDetail',
          query: {
            userId: localStorage.getItem(JSON.parse(window.localStorage.data).id),
            mallId: this.goods[index].id
          }
        })
      }
    },
    computed: {}
  }
</script>

<style lang="scss" scoped>
  .app-cont {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0px 0 10px;
    box-sizing: border-box;
    .header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 80px;
    }
    .main {
      flex: 1;
      position: relative;
      .main-container {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow: hidden;
      }
    }
    .footer {
      position: fixed;
      bottom: 0;
      left: 0;
      height: 92px;
      width: 100%;
    }
  }

  .app-cont {
    .tabbar {
      position: fixed;
      box-sizing: border-box;
      height: 94px;
      border-top: 1px solid #f3f3f3;
      color: #898d93;
    }
  }

  #memberList {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .topbar {
      height: 82px;
      width: 100%;
      background-color: #fff;
      ul {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        justify-content: space-between;
        height: 100%;
        list-style: none;
        li {
          /*flex:1;*/
          height: 100%;
          padding: 0 27px;
          span {
            display: inline-block;
            width: 96px;
            font-size: 24px;
            color: #3b3b43;
            line-height: 82px;
          }
        }
      }
    }
    .fenlei-list {
      width: 100%;
      flex: 1;
      position: relative;
      .list {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        ul {

        }
      }
    }
  }

  .fenlei {
    ::-webkit-scrollbar {
      display: none;
    }
    width: 100%;
    height: 100%;
    background-color: #f4f4f4;
    display: flex;
    flex-direction: column;

    .fenlei-list {
      width: 100%;
      flex: 1;
      display: flex;
    }
  }

  .list {
    width: 100%;
  }

  .fenlei-list ul {
    overflow: hidden;
    overflow-y: auto;
  }

  .fenlei-list li {
    background: #ffffff;
    width: 100%;
    height: 276px;
  }

  .fenlei-list li .top {
    height: 100%;
    border-bottom: 1px solid #f4f4f4;
    box-sizing: border-box;
    padding: 26px 20px 26px 30px;
  }

  .fenlei-list li .top .left {
    width: 220px;
    height: 220px;
    float: left;
  }

  .fenlei-list li .top .left img {
    width: 220px;
    height: 220px;
  }

  .fenlei-list li .top .right {
    font-size: 26px;
    width: 57%; /*让文本自动换行，自适应*/
    margin-left: 28px;
    float: left;
  }

  .fenlei-list li .top .right > .goodsName {
/*    text-overflow: -o-ellipsis-lastline;*/
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: #3b3b43;
  }

  .fenlei-list li .top .right .goodsPrice {
    margin: 22px 0 24px;
  }

  .fenlei-list li .top .right .goodsPrice .gray {
    font-size: 20px;
    color: #a1a1a1;
  }

  .fenlei-list li .top .right .red {
    width: 100%;
    font-size: 30px;
    height: 34px;
    margin-bottom: 10px;
    .red-left {
      float: left;
      color: #3b3b43;
    }
    .red-right {
      float: right;
      color: #fd4c2e;
    }
  }

  .fenlei-list li .top .right .jdp {
    font-size: 18px;
    color: #a1a1a1;
    .jdp-left {
      float: left;
    }
    .jdp-right {
      float: right;
    }
  }

</style>
<style lang="scss">
  .MemberlistNow .mint-tab-item-label {
    color: #fe3f22;
  }
</style>
